<!--
 * @Descripttion:  教师信息列表
 * @version: 
 * @Author: hzx
 * @Date: 2021-03-05 16:05:17
 * @LastEditors: hzx
 * @LastEditTime: 2021-05-14 18:26:54
-->
<template>
    <a-button class="button" type="primary" @click="showStuModal">
        增加
    </a-button>
    <!-- 增加信息弹窗 -->
    <a-modal
        v-model:visible="visible"
        ok-text="确认"
        cancel-text="取消"
        title="老师信息"
        @ok="addTeacher(teaData)"
    >
        <a-form
            :model="teaData"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
        >
            <a-form-item label="姓名">
                <a-input
                    placeholder="请输入你的姓名"
                    v-model:value="teaData.t_name"
                />
            </a-form-item>
            <a-form-item label="性别">
                <a-select
                    v-model:value="teaData.t_sex"
                    placeholder="请选择性别"
                >
                    <a-select-option value="1">男</a-select-option>
                    <a-select-option value="0">女</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="部门">
                <a-select
                    placeholder="请选择部门"
                    v-model:value="teaData.dev_id"
                >
                    <a-select-option value="1">工学系</a-select-option>
                    <a-select-option value="2">信息工程系</a-select-option>
                    <a-select-option value="3">智能工程系</a-select-option>
                    <a-select-option value="4">人文教育系</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="教师编号">
                <a-input
                    placeholder="请输入教师编号"
                    v-model:value="teaData.t_id"
                />
            </a-form-item>

            <a-form-item label="入校时间">
                <a-date-picker
                    v-model:value="teaData.rx_time"
                    show-time
                    type="date"
                    placeholder="请选择您的入校时间"
                    style="width: 100%"
                />
            </a-form-item>
        </a-form>
    </a-modal>
    <a-input-search
        class="search"
        v-model:value="teaId"
        placeholder="请输入教师编号"
        style="width: 200px"
        @search="onSearch"
    />
    <a-input-search
        class="search"
        v-model:value="devId"
        placeholder="请输入部门名称"
        style="width: 200px"
        @search="onSearch"
    />
    <a-table
        :rowKey="(record) => record.t_id"
        :columns="columns"
        :data-source="state.data"
        bordered
    >
        <template #action="{ record }">
            <span>
                <a-button class="button" @click="showupTeaModal(record.t_id)"
                    >修改</a-button
                >
                <a-button
                    class="button"
                    type="dashed"
                    @click="error(record.t_id)"
                    >删除</a-button
                >
            </span>
        </template>
    </a-table>
    <!-- 修改信息弹窗 -->
    <a-modal
        v-model:visible="upvisible"
        title="修改教师信息"
        ok-text="确认"
        cancel-text="取消"
        @ok="updateTeaModal(upTeaData)"
    >
        <a-form
            :model="upTeaData"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
        >
            <a-form-item label="姓名">
                <a-input
                    placeholder="请输入你的姓名"
                    v-model:value="upTeaData.t_name"
                />
            </a-form-item>
            <a-form-item label="性别">
                <a-select
                    v-model:value="upTeaData.t_sex"
                    placeholder="请选择性别"
                >
                    <a-select-option value="1">男</a-select-option>
                    <a-select-option value="0">女</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="部门">
                <a-select
                    placeholder="请选择部门"
                    v-model:value="upTeaData.dev_id"
                >
                    <a-select-option value="1">工学系</a-select-option>
                    <a-select-option value="2">信息工程系</a-select-option>
                    <a-select-option value="3">智能工程系</a-select-option>
                    <a-select-option value="4">人文教育系</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="教师编号">
                <a-input
                    placeholder="请输入教师编号"
                    v-model:value="upTeaData.t_id"
                />
            </a-form-item>

            <a-form-item label="入校时间">
                <a-date-picker
                    v-model:value="upTeaData.rx_time"
                    show-time
                    type="date"
                    placeholder="请选择您的入校时间"
                    style="width: 100%"
                    format="YYYY-MM-DD"
                />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script>
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { defineComponent, createVNode, reactive, onMounted, ref } from "vue";
import { Modal } from "ant-design-vue";
import { formatterDev } from "@/utils/toolbox";
import {
    getTeachers,
    selectTeacherId,
    insterTeacher,
    updateTeacher,
    delTeacher,
    selectDevname,
} from "@/api/teacher";
const columns = [
    {
        title: "部门",
        dataIndex: "dev_id",
        key: "dev_id",
        customRender({ record }) {
            return formatterDev(record.dev_id);
        },
    },
    {
        title: "姓名",
        dataIndex: "t_name",
        key: "name",
    },
    {
        title: "教师编号",
        dataIndex: "t_id",
        key: "id",
        ellipsis: true,
    },
    {
        title: "性别",
        dataIndex: "t_sex",
        key: "sex",
        ellipsis: true,
        customRender({ record }) {
            return record.t_sex === "1" ? "男" : "女"; //0是男，1是女
        },
    },
    {
        title: "入校时间",
        dataIndex: "rx_time",
        key: "rx_times",
        ellipsis: true,
    },
    {
        title: "操作",
        key: "action",
        slots: { customRender: "action", dataIndex: "t_id" },
    },
];

export default defineComponent({
    setup() {
        let state = reactive({
            data: [],
        });

        const onSubmit = () => {
            //console.log("submit!", toRaw(teaData));
        };
        
        onMounted(async () => {
            //获取老师信息
            state.data = await getTeachers();
        });

        //查询部门  老师信息模块
        const teaId = ref("");
        const devId = ref("");
        async function onSearch(searchValue) {
            if (searchValue.length === 4) {
                state.data = await selectTeacherId(searchValue);
            } else {
                state.data = await selectDevname(searchValue);
            }
        }

        //增加老师信息
        const visible = ref(false);
        const showStuModal = () => {
            //打开增加对话框
            visible.value = true;
        };
        const addTeacher = async (teaData) => {
            await insterTeacher(teaData);
            visible.value = false;
            state.data = await getTeachers();
        };
        const teaData = reactive({
            t_name: "蓝老板",
            t_sex: "1",
            t_id: "1017",
            dev_id: "1",
        });

        //修改老师信息
        const upvisible = ref(false);
        const showupTeaModal = async (t_id) => {
            let [data] = await selectTeacherId(t_id);
            upTeaData.t_name = data.t_name;
            upTeaData.t_sex = data.t_sex.toString();
            upTeaData.t_id = data.t_id;
            upTeaData.dev_id = data.dev_id.toString();
            upTeaData.rx_time = data.rx_time;
            //打开修改对话框
            upvisible.value = true;
        };
        const updateTeaModal = async (upTeaData) => {
            let upTeaDatas = upTeaData
            upTeaDatas.rx_time = Date.parse(upTeaDatas.rx_time).toString().substring(0,10)
            await updateTeacher(upTeaDatas);
            upvisible.value = false;
            state.data = await getTeachers();
        };
        let upTeaData = reactive({
            t_name: "",
            t_sex: "",
            t_id: "",
            dev_id: "",
            rx_time: null,
        });

        // 删除老师信息
        const error = (t_id) => {
            Modal.confirm({
                title: "确定删除该老师?",
                icon: createVNode(ExclamationCircleOutlined),
                okText: "确定",
                okType: "danger",
                cancelText: "取消",
                async onOk() {
                    await delTeacher(t_id);
                    state.data = await getTeachers();
                },
                onCancel() {
                    //console.log("取消删除");
                },

                //message.error(stu_id);
            });
        };
        return {
            showStuModal,
            addTeacher,
            visible,
            teaData,
            upvisible,
            updateTeaModal,
            upTeaData,
            showupTeaModal,
            teaId,
            devId,
            onSearch,
            state,
            columns,
            labelCol: {
                span: 6,
            },
            wrapperCol: {
                span: 14,
            },
            onSubmit,
            error,
        };
    },
});
</script>

<style lang="less" scoped>
.button {
    margin-right: 20px;
}
.search {
    margin-bottom: 15px;
    margin-right: 20px;
}
</style>